<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import { RefreshRight } from "@element-plus/icons-vue"
import { CompanyBillListApi, companyBillwithdrawsApi } from "@/api/bill"
// import { companyListApi } from "@/api/conventional"
import { ElMessage } from "element-plus"
import completedBill from "./completedBill.vue"
const completedBillRef = ref<any>(undefined)
const loading = ref<boolean>(false)
const listBool = ref<boolean>(false)
const tableData = ref<any[]>([])
// const state1 = ref<string>("")

onMounted(() => {
  getCompanyTime()
})

const getCompanyTime = () => {
  loading.value = true
  tableData.value = []
  CompanyBillListApi(formInline)
    .then((res: any) => {
      if (res.data.length > 0) {
        tableData.value = res.data
        listBool.value = true
      }
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}

const getCompanyBillwithdraws = (el: any) => {
  companyBillwithdrawsApi({
    ids: el.id,
    company_id: el.company_id
  })
    .then(() => {
      ElMessage.success("操作成功")
    })
    .catch(() => {})
    .finally(() => {
      getCompanyTime()
    })
}
const RefreshRights = () => {
  getCompanyTime()
}
const handleCompany = (el: any) => {
  if (completedBillRef.value) {
    completedBillRef.value.showClick(el)
  }
}
const customDateTimeFormat = ref<string>("YYYY-MM-DD")
const formInline = reactive({
  company_id: undefined,
  create_time_start: undefined,
  create_time_end: undefined,
  company_name: "",
  is_finish: 1
})

const onSubmit = () => {
  getCompanyTime()
}
// const handleSelect = (item: any) => {
//   formInline.company_id = item.id
// }
// const handleChange = (value: string) => {
//   console.log(value)
//   if (value.length === 0) {
//     formInline.company_id = undefined
//   }
// }
// const querySearch = (queryString: string, cb: any) => {
//   state1.value = queryString
//   companyListApi({
//     company_name: state1.value
//   }).then((res) => {
//     const lists = res.data
//     if (lists.length == 0) {
//       ElMessage.error("请先添加企业信息")
//       cb([])
//     } else {
//       cb(lists)
//     }
//   })
// }
</script>
<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- <el-form-item label="公司名称">
              <el-autocomplete
                v-model="state1"
                :fetch-suggestions="querySearch"
                clearable
                value-key="company_name"
                placeholder="请输入公司名称"
                @select="handleSelect"
                @change="handleChange"
              />
            </el-form-item> -->
            <el-form-item label="公司名称">
              <el-input v-model="formInline.company_name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="结账日期">
              <el-date-picker
                v-model="formInline.create_time_start"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
              />
              <span>&nbsp;&nbsp; 至 &nbsp;&nbsp;</span>
              <el-date-picker
                v-model="formInline.create_time_end"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit"> 确 认 </el-button>
            </el-form-item>
          </el-form>

          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="RefreshRights" />
          </el-tooltip>
        </div>
      </template>
      <div v-if="listBool" class="rows">
        <div v-for="(item, index) in tableData" :key="index" class="box" @click="handleCompany(item)">
          <div style="width: 110px">{{ item.date }}</div>
          <div style="width: calc(100% - 330px)">{{ item.company_name }}</div>
          <div style="width: 80px; display: flex; justify-content: center">{{ item.nickname }}</div>
          <div style="width: 120px; display: flex; justify-content: center">
            <el-button type="primary" @click.stop="getCompanyBillwithdraws(item)"> 撤 回 </el-button>
          </div>
          <!-- <div>{{ item.company.company_name }}</div>
          <div>{{ item.company.user_text }}</div> -->
        </div>
      </div>
      <el-empty v-else description="暂无数据" />
    </el-card>
    <completedBill ref="completedBillRef" />
  </div>
</template>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
}

.rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .box {
    width: 48%;
    height: 50px;
    background-color: #f0f2f5;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-radius: 20px;
    cursor: pointer;
  }
}
</style>
